<!doctype html>
<!--
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
  <script src="wct-browser-config.js"></script>
  <script src="../../node_modules/wct-browser-legacy/browser.js"></script>
  <script type="module" src="./polymer-element-with-apply-import.js"></script>
</head>
<body>
  <custom-style>
    <style>
    html {
      --mixin: {
        height: 200px;
        width: 200px;
        background-color: rgb(0, 0, 255);
      }
    }
    </style>
  </custom-style>

  <test-fixture id="apply">
    <template>
      <apply-element></apply-element>
    </template>
  </test-fixture>

  <test-fixture id="outer">
    <template>
      <x-outer></x-outer>
    </template>
  </test-fixture>

  <script type="module">
import './polymer-element-with-apply-import.js';
suite('Polymer.Element with ApplyShim', function() {
  test('mixin from custom style', function() {
    var el = fixture('apply');
    assert.equal(ShadyCSS.getComputedStyleValue(el, 'background-color'), 'rgb(0, 0, 255)');
    assert.equal(ShadyCSS.getComputedStyleValue(el, 'height'), '200px');
    assert.equal(ShadyCSS.getComputedStyleValue(el, 'width'), '200px');
  });
  test('nested', function() {
    var el = fixture('outer');
    var inner = el.shadowRoot.querySelector('apply-element');
    assert.equal(ShadyCSS.getComputedStyleValue(el, 'background-color'), 'rgb(123, 123, 123)');
    assert.equal(ShadyCSS.getComputedStyleValue(el, 'height'), '200px');
    assert.equal(ShadyCSS.getComputedStyleValue(el, 'width'), '200px');

    assert.equal(ShadyCSS.getComputedStyleValue(inner, 'background-color'), 'rgb(255, 0, 0)');
    assert.equal(ShadyCSS.getComputedStyleValue(inner, 'height'), '100px');
    assert.equal(ShadyCSS.getComputedStyleValue(inner, 'width'), '100px');
    assert.equal(ShadyCSS.getComputedStyleValue(inner, 'margin-top'), '50px');
  });
});
</script>
</body>
</html>